
<style lang="less" scoped>
.answer-page-content {
  margin: 10px 60px;

  // 问题部分
  .request-details {
    // 问题标题
    .request-details-title {
      h1 {
        display: inline;
        vertical-align: middle;
        color: #17233d;
      }
    }

    // 问题的提问时间
    .request-details-date {
      margin-top: 5px;
      font-size: 12px;
      vertical-align: middle;
      color: #808695;
    }
  }

  // 问题回答列表
  .request-answer-list {
    margin-top: 20px;
    // 回答日期
    .answer-date {
      color: #808695;
      font-size: 12px;
    }
  }

  // 提问者，回答者名字位置
  .user-name-postion {
    float: right;
    margin-right: 9px;
  }

  // 右边侧边栏
  .right-aside {
    margin-left: 30px;
    // 收藏分享、举报等
    .aside-request-tip-card {
      margin-top: 19px;
      //内容
      .tip-card-con {
        // height: 16px;
        overflow: auto;
        // 每一项
        // a {
        //   margin: 0px 50px;
        // }
      }
    }
  }
}

// 统一样式 a标签
a {
  font-family: "PingFang SC";
  font-weight: bold;
  color: #464c5b;
}
a:hover {
  color: #2b85e4;
}
</style>

<template>
  <div class="answer-page-content">
    <Row>
      <Col span="18">
        <div>
          <!-- 显示问题 -->
          <div class="request-details">
            <Row>
              <Col span="2">
                <Tag class="user-name-postion" color="geekblue">{{
                  request.userName
                }}</Tag>
                <Tag class="user-name-postion" color="purple">问题</Tag>
              </Col>
              <Col span="22">
                <div>
                  <Card :bordered="false">
                    <div class="request-details-title">
                      <Tag v-if="request.status == 1" checkable color="warning"
                        >未回答</Tag
                      >
                      <Tag
                        v-else-if="request.status == 2"
                        checkable
                        color="primary"
                        >回答中</Tag
                      >
                      <Tag v-else checkable color="success">已采纳</Tag>
                      <h1>{{ request.title }}</h1>
                    </div>
                    <div class="request-details-date">
                      {{ request.createdAt }}
                    </div>
                    <request-answer-content :content="request.content" />
                  </Card>
                </div>
              </Col>
            </Row>
          </div>
          <!-- 回答列表 -->
          <div class="request-answer-list">
            <div v-for="answer in request.answerList">
              <!-- 正常回答 -->
              <div
                style="margin-top: 20px"
                :id="answer.userId + '-' + answer.timeStamp"
              >
                <Row>
                  <Col span="2">
                    <Tag class="user-name-postion" color="geekblue">{{
                      answer.userName
                    }}</Tag>
                    <Tag class="user-name-postion" color="green">回答</Tag>
                  </Col>
                  <Col span="22">
                    <Card :bordered="false">
                      <div class="answer-date">
                        <span>{{ answer.createdAt }}</span>
                        <span style="float: right">
                          <Button
                            v-if="answer.attachAnswer.length > 0"
                            type="text"
                            @click="showAttachList(answer)"
                            >more</Button
                          >
                          <Dropdown
                            v-if="isLogin == true && getUserId != answer.userId"
                          >
                            <a href="javascript:void(0)">
                              <Icon type="ios-arrow-down"></Icon>
                            </a>
                            <DropdownMenu slot="list">
                              <DropdownItem>
                                <a
                                  @click="handleCollecte(2, answer.tid)"
                                  v-if="getUserId != answer.userId"
                                  >收藏</a
                                >
                              </DropdownItem>
                              <DropdownItem>
                                <a
                                  @click="showReportModal(2, answer.tid)"
                                  v-if="getUserId != answer.userId"
                                  >举报</a
                                >
                              </DropdownItem>
                              <DropdownItem
                                v-if="
                                  answer.attachAnswer.length == 0 &&
                                  request.status != 3 &&
                                  getUserId == request.userId
                                "
                              >
                                <a @click="attachRequest(answer)">追问</a>
                              </DropdownItem>
                              <DropdownItem
                                v-if="
                                  request.status != 3 &&
                                  getUserId == request.userId
                                "
                              >
                                <a @click="handleAdopt(request.tid, answer.tid)"
                                  >采纳</a
                                >
                              </DropdownItem>
                            </DropdownMenu>
                          </Dropdown>
                        </span>
                      </div>
                      <!-- <div class="request-answer-content" v-html="answer.content"/> -->
                      <request-answer-content :content="answer.content" />
                    </Card>
                  </Col>
                </Row>
              </div>
              <!-- 追问回答 -->
              <div v-if="answer.attachAnswer.length > 0">
                <div
                  v-for="attachAnswer in answer.attachAnswer"
                  style="margin-top: 20px; margin-left: 80px"
                  v-show="answer.show === true"
                >
                  <Row>
                    <Col span="2">
                      <Tag class="user-name-postion" color="geekblue">{{
                        attachAnswer.userName
                      }}</Tag>
                      <Tag
                        v-if="attachAnswer.userId == request.userId"
                        class="user-name-postion"
                        color="purple"
                        >追问</Tag
                      >
                      <Tag v-else class="user-name-postion" color="cyan"
                        >回复</Tag
                      >
                    </Col>
                    <Col span="22">
                      <Card :bordered="false">
                        <div class="answer-date">
                          <span>{{ answer.createdAt }}</span>
                          <span style="float: right">
                            <!-- <Dropdown>
                              <a href="javascript:void(0)">
                                <Icon type="ios-arrow-down"></Icon>
                              </a>
                              <DropdownMenu slot="list">
                                <DropdownItem>
                                  <a @click="handleReport(2,attachAnswer.pid)">举报</a>
                                </DropdownItem>
                                <DropdownItem>
                                  <a @click="handleAdopt(request.tid,attachAnswer.pid)">采纳</a>
                                </DropdownItem>
                              </DropdownMenu>
                            </Dropdown>-->
                          </span>
                        </div>
                        <!-- <div class="request-answer-content" v-html="attachAnswer.content"/> -->
                        <request-answer-content
                          :content="attachAnswer.content"
                        />
                      </Card>
                    </Col>
                  </Row>
                </div>
                <!-- 填写追问内容的 -->
                <div
                  style="margin-top: 20px; margin-left: 80px"
                  v-show="answer.show == true"
                  v-if="
                    request.status != 3 &&
                    isLogin == true &&
                    getUserId !=
                      answer.attachAnswer[answer.attachAnswer.length - 1]
                        .userId &&
                    (getUserId == request.userId || getUserId == answer.userId)
                  "
                >
                  <Row>
                    <Col span="2">
                      <span
                        class="user-name-postion"
                        style="
                          height: 20px;
                          line-height: 20px;
                          font-size: 16px;
                          color: #17233d;
                          font-weight: bold;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          white-space: nowrap;
                        "
                        >回复：</span
                      >
                    </Col>
                    <Col span="22">
                      <reply-form
                        v-if="isLogin"
                        :ref="'ReplyFormRef' + answer.tid"
                        :formObj="getAnserCopy(answer)"
                        @handleSubmit="handleReply"
                      ></reply-form>
                      <div v-else style="text-align: center">
                        <Button type="text" style="font-size: 16px" to="/login"
                          >请先登录再回复</Button
                        >
                      </div>
                    </Col>
                  </Row>
                </div>
              </div>
            </div>
          </div>
          <!-- 点击追问显示模态框 -->
          <Modal
            v-model="attachShow"
            :scrollable="true"
            width="850"
            footer-hide
            :closable="false"
          >
            <p
              slot="header"
              style="text-align:center;overflow：hidden; font-size:16px"
            >
              <span>追问</span>
              <span
                @click="attachRequestClose"
                style="float: right; font-size: 30px"
              >
                <Icon type="ios-close" />
              </span>
            </p>
            <reply-form
              ref="AttachRequestModalRef"
              :formObj="attachRequestForm"
              @handleSubmit="handleAttachRequest"
            ></reply-form>
          </Modal>
          <!-- </div> -->
          <!-- 普通回答 -->
          <div
            class="request-answer-list"
            v-if="request.status != 3 && getUserId != request.userId"
          >
            <Row>
              <Col span="2">
                <span
                  class="user-name-postion"
                  style="
                    height: 20px;
                    line-height: 20px;
                    font-size: 16px;
                    color: #17233d;
                    font-weight: bold;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  "
                  >回答</span
                >
              </Col>
              <Col span="22">
                <reply-form
                  v-if="isLogin"
                  ref="AnswerFormRef"
                  :formObj="answerForm"
                  @handleSubmit="handleSubmit"
                ></reply-form>
                <div v-else style="text-align: center">
                  <Button type="text" style="font-size: 16px" to="/login"
                    >请先登录再回答</Button
                  >
                </div>
              </Col>
            </Row>
          </div>
          <!-- 举报模态框 -->
          <Modal
            v-model="eportModalShow"
            title="举报"
            scrollable
            :closable="false"
            :draggable="true"
            @on-ok="handleReport"
            @on-cancel="cancelReport"
          >
            <Form
              ref="EportformRef"
              :model="eportform"
              label-position="right"
              :label-width="100"
            >
              <FormItem label="违规类型">
                <Select
                  v-model="eportform.reportType"
                  @on-change="reportTypeChage"
                >
                  <Option :value="1">含有敏感词语</Option>
                  <Option :value="2">其他</Option>
                </Select>
              </FormItem>
              <FormItem label="描述" v-show="eportFormDescShow">
                <Input type="textarea" v-model="eportform.desc"></Input>
              </FormItem>
            </Form>
          </Modal>
        </div>
      </Col>
      <!-- 右侧侧边栏 -->
      <Col span="6">
        <!-- 右边侧边栏 -->
        <div class="right-aside">
          <Card class="aside-request-info-card">
            <p slot="title">问题信息</p>
            <div>
              <p>回答数：{{ request.answerCount }}</p>
              <p>
                问题分类：
                <Tag color="magenta">{{ request.professionName }}</Tag>
                <Tag color="green">{{ request.corseName }}</Tag>
              </p>
              <p>提问时间：{{ request.createdAt }}</p>
            </div>
          </Card>
          <Card
            class="aside-request-tip-card"
            v-if="getUserId != request.userId"
          >
            <div class="tip-card-con">
              <Button
                style="float: left; margin: 0px 33px"
                :disabled="!isLogin"
                @click="handleCollecte(1, request.tid)"
                >收藏</Button
              >
              <Button
                :disabled="!isLogin"
                style="float: right; margin: 0px 33px"
                @click="showReportModal(1, request.tid)"
                >举报</Button
              >
            </div>
          </Card>
        </div>
      </Col>
    </Row>
  </div>
</template>
<script>
import httpUtil from '@/libs/httpUtil'
import ReplyForm from './request-answer/ReplyForm.vue'
import RequestAnswerContent from './request-answer/RequestAnswerContent.vue'

import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'Answer',
  props: ['requestId'],
  components: {
    ReplyForm,
    RequestAnswerContent
  },
  data () {
    return {
      answerForm: {}, // 封装回答数据的对象
      attachRequestForm: {}, // 封装追问的对象
      attachAnswerForm: {}, // 封装追问再回答数据的对象
      attachShow: false,
      request: {}, // 问题对象
      eportModalShow: false,
      eportFormDescShow: false,
      eportform: {
        reportType: 1
      }
    }
  },
  computed: {
    ...mapGetters(['isLogin', 'getUserId', 'getUserName']),
    getLastItemUserId (attachAnswerList) {
      debugger
      return attachAnswerList[attachAnswerList.length - 1].userId
    }
  },
  methods: {
    getAnserCopy (answer) {
      return JSON.parse(JSON.stringify(answer))
    },
    // 提交回答信息
    handleSubmit (obj) {
      // 回答信息封装
      this.answerForm.requestId = this.requestId
      this.answerForm.type = 1
      this.$httpUtil.asyncPost(
        'request_answer/answer/save',
        this.answerForm,
        (res) => {
          let data = res.data
          if (data.code === 200) {
            this.$Message.success('回答成功')
            this.getRequestAnswer()
            // this.lockUI();
            this.$refs['AnswerFormRef'].lockUI() // 上锁回答输入框
            this.answerFormObj.isSuccess = true
          } else {
            this.$Message.errow(res.data.msg)
          }
        }
      )
    },

    // 获取问题的回答
    getRequestAnswer () {
      // 获取reqAnsType 判断是否跳转收藏回答详情
      let reqAnsType = this.$route.query.reqAnsType
      let reqAnsId = this.$route.query.reqAnsId
      const RequestUrl =
        reqAnsType == 2 ? `web/user-main/collectDetail?reqAnsType=${reqAnsType}&requestId=${this.requestId}&reqAnsId=${reqAnsId}`
          : 'request_answer/request/queryRequestAnswerById'
      const RequestBody = reqAnsType == 2 ? {requestId: this.requestId, reqAnsType: reqAnsType, reqAnsId: reqAnsId} : { requestId: this.requestId }
      this.$httpUtil.asyncPost(
        RequestUrl,
        { requestId: this.requestId },
        (res) => {
          if (res.data.code === 200) {
            this.request = res.data.records
          }
        }
      )
    },

    // 采纳回答
    handleAdopt (requestId, answerId) {
      this.gotoLogin()
      const data = {
        requestId,
        answerId
      }
      this.$httpUtil.asyncPost('request_answer/request/adopt', data, (res) => {
        let data = res.data
        if (data.code === 200) {
          this.$Message.success(data.msg)
        } else {
          this.$Message.error(data.msg)
        }
      })
    },

    // 处理收藏
    handleCollecte (reqAnsType, reqAnsId) {
      this.gotoLogin()
      // 前端要返回的是问题或者答案id   问题还是答案类别
      const data = {
        reqAnsType,
        reqAnsId
      }
      this.$httpUtil.asyncPost(
        'request_answer/request/collecte',
        data,
        (res) => {
          let data = res.data
          if (data.code === 200) {
            this.$Message.success('收藏成功')
          } else {
            this.$Message.error(res.data.msg)
          }
        }
      )
    },

    // 显示举报 1.提问  2.回答
    showReportModal (reqAnsType, reqAnsId) {
      this.gotoLogin();
      (this.eportform.reqAnsId = reqAnsId),
      (this.eportform.reqAnsType = reqAnsType)
      this.eportModalShow = true
    },
    // 处理举报
    handleReport () {
      this.$httpUtil.asyncPost(
        'request_answer/request/report',
        this.eportform,
        (res) => {
          let data = res.data
          if (data.code === 200) {
            this.$Message.success('举报成功')
            this.cancelReport()
          } else {
            this.$Message.error(res.data.msg)
          }
        }
      )
    },
    // 取消举报
    cancelReport () {
      this.eportModalShow = false
      this.$refs.EportformRef.resetFields()
      this.eportform.desc = ''
      this.showBroswerScroll()
      // window.location.reload()
    },
    // 显示隐藏 举报详情描述
    reportTypeChage (value) {
      if (value === 2) {
        this.eportFormDescShow = true
      } else {
        this.eportFormDescShow = false
      }
    },

    // 显示追问列表
    showAttachList (answer) {
      if (answer.show) answer.show = false
      else answer.show = true
    },

    // 对一级回答 的追问 处理
    handleAttachRequest (replyFormObj) {
      debugger

      const reqData = {
        requestId: this.requestId,
        pid: replyFormObj.tid,
        content: replyFormObj.content
      }

      this.$httpUtil.asyncPost(
        'request_answer/answer/attach-request',
        reqData,
        (res) => {
          let data = res.data
          if (data.code === 200) {
            this.$Message.success('回答成功')
            this.getRequestAnswer()
            // this.lockUI();
            this.$refs['AttachRequestModalRef'].handleReset() // 上锁回答输入框
          } else {
            this.$Message.error(res.data.msg)
          }
          this.attachRequestClose()
        }
      )
    },

    // 一级回答的 追问按钮点击
    attachRequest (answer) {
      this.gotoLogin()
      debugger
      this.attachRequestForm = answer
      this.attachShow = true
    },

    // 一级追问 点击关闭
    attachRequestClose () {
      this.attachShow = false
      this.showBroswerScroll()
    },

    // 处理二级  再次回答和再次处理
    handleReply (replyFormObj) {
      const reqData = {
        requestId: this.requestId,
        pid: replyFormObj.tid,
        content: replyFormObj.content
      }
      let that = this
      this.$httpUtil.asyncPost(
        'request_answer/answer/attach-reply',
        reqData,
        (res) => {
          let data = res.data
          let formRef = 'ReplyFormRef' + replyFormObj.tid
          if (data.code === 200) {
            this.$Message.success(data.msg)
            this.getRequestAnswer()
            // this.lockUI();
            this.$refs[formRef].forEach((item) => {
              item.lockUI() // 上锁回答输入框
            })
          } else {
            that.$refs[formRef].forEach((item) => {
              item.handleReset() // 清空回答输入框
            })
            this.$Message.error(res.data.msg)
          }
        }
      )
    },

    // 没有登录的跳转登录页
    gotoLogin () {
      if (!this.isLogin) {
        this.$router.push({ paht: '/login' })
      }
    },

    // 让浏览器滚动条别消失
    showBroswerScroll () {
      setTimeout(() => {
        document.body.style.overlfow = 'auto'
        document.body.parentNode.style.overflowY = 'auto'
      }, 800)
    },

    // 界面初始化方法
    init () {
      this.getRequestAnswer()
      this.showBroswerScroll()
    }
  },

  mounted: function () {
    this.init()
  }
}
</script>
